import React, { useState, useEffect } from "react";
import Taro from "@tarojs/taro";
import { getCurrentInstance } from "@tarojs/taro";
import { View } from "@tarojs/components";
import { AtCheckbox, AtAccordion } from "taro-ui";
import _ from "lodash";

import api from "@api/api.js";
import "./index.less";

export default (props) => {
  const [clinicSchemesId, setId] = useState({}); // 科室方案id
  const [list, setList] = useState([]); //材料列表
  const [selecList, setSelectList] = useState({}); //选中的材料
  const [open, setOpen] = useState({}); // 手风琴控制
  const [types, setType] = useState(false);
  useEffect(() => {
    // 判断是案例还是方案
    const type = getCurrentInstance().router.params.type;
    console.log(type);
    if (type == "case") {
      const id = JSON.parse(getCurrentInstance().router.params.id);
      setType(type);
      getList(id, type);
    } else {
      const id = getCurrentInstance().router.params.id;
      getList(id);
      setId(id);
    }
  }, []);

  // 获取材料列表
  const getList = async (id, type) => {
    const { data } = await (type
      ? api.getCaseMaterials({ ids: id })
      : api.getMaterials(id));
    if (data) {
      const selectArr = {};
      data.map((item) => {
        const arr = [];
        let child = type ? item.child : item.childrenOptions;
        child &&
          child.map((items) => {
            const res = {
              value: type ? items.id : items.optionId,
              label: type ? items.name : items.optionName,
            };
            arr.push(res);
            if (items.checked) {
              selectArr[item.optionId] = [];
              selectArr[item.optionId].push(res.value);
            }
          });
        item.child = arr;
      });
      setList(data);
      setSelectList(selectArr);
    }
  };

  // 选择的材料
  const change = (key, value) => {
    selecList[key] = value;
    setSelectList({ ...selecList });
  };

  // 手风琴展开
  const accordionChange = (key, value) => {
    open[key] = value;
    setOpen({ ...open });
  };

  // 下一步
  const save = async () => {
    let arr = [];
    for (const i in selecList) {
      arr = _.concat(arr, selecList[i]);
    }
    if (types == "case") {
      const { data, code } = await api.saveCase({
        subjectIds: arr,
        caseType: "oneself",
      });
      if (code == 200) {
        Taro.navigateTo({ url: `/pages/editCase/index?id=${data}` });
      }
    } else {
      const { data, code } = await api.saveSurgicalMaterials(
        { materialsIdList: arr },
        clinicSchemesId
      );
      if (code == 200) {
        Taro.reLaunch({
          url: `/pages/add/index?id=${data.diagnosisSchemesId}&clinicSchemesId=${data.clinicSchemesId}`,
        });
      }
    }
  };
  return (
    <View className="bgBox">
      {list.map((item) => {
        return (
          <View className="listBox">
            <AtAccordion
              open={
                open.length > 0 ? open[types ? item.id : item.optionId] : true
              }
              title={types ? item.name : item.optionName}
              onClick={accordionChange.bind(
                this,
                types ? item.id : item.optionId
              )}
            >
              <AtCheckbox
                options={item.child}
                selectedList={selecList[types ? item.id : item.optionId]}
                onChange={change.bind(this, types ? item.id : item.optionId)}
              />
            </AtAccordion>
          </View>
        );
      })}
      <View className="bottomBtn" onClick={save}>
        <View>下一步</View>
      </View>
    </View>
  );
};
